<template>
<div class="menu-list">
                        <div v-for="item in list" :key="item.id" >
                            <div class="time2">
                                <span>2023-2-6</span>
                                <span class="redsapn">未付款</span>
                            </div>
                            <div @click="todetail(item.id)">
                                <van-card num="2" :price="item.price" desc="02月10日提货" :title="item.shop"
                                    :thumb="item.picture">
                                </van-card>
                                <van-button round size="small" type="danger" @click=" tocheckpay() ; usetDetail.changePrice(item)" >立即付款</van-button>
                            </div>
                            <hr>
                        </div>
                    </div>
</template>

<script setup lang="ts">
import { useCartStore } from '@/stores/cart';
import {type Ref ,ref,onMounted} from 'vue'
import {useDetailStore} from '@/stores/detail'
import { useRouter } from 'vue-router'

const usetDetail = useDetailStore()
const router = useRouter();

const list:Ref<Array<any>> = ref([])
const useCart = useCartStore()
list.value = useCart.list
const tocheckpay = ()=>{
    router.push({path:'/checkpay'})
}
// 商品详情
const todetail = (id:number)=>{
    router.push({path:'/detail',query:{id}})
} 
</script>

<style scoped lang="scss">
.menu-list {
    margin-top: 10px;
    height: 880px;
    width: 100%;
    display: flex;
    flex-direction: column;

    .time {
        padding: 5px 24px 5px 24px;
        display: flex;
        justify-content: space-between;
        background-color: #ffffff;

    }

    .time2 {
        padding: 5px 24px 5px 24px;
        display: flex;
        justify-content: space-between;
        background-color: #ffffff;

        .redsapn {
            color: red;
        }
    }
    .van-button{
        float: right;
    }
}
</style>